<!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>&ast;&ast;&#x9e3f;&#x8499;&#x667a;&#x80fd;&#x5bb6;&#x5c45; App &#x4f7f;&#x7528;&#x8bf4;&#x660e;&ast;&ast;</title>
            <style>
/* From extension vscode.github */
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.vscode-dark img[src$=\#gh-light-mode-only],
.vscode-light img[src$=\#gh-dark-mode-only],
.vscode-high-contrast:not(.vscode-high-contrast-light) img[src$=\#gh-light-mode-only],
.vscode-high-contrast-light img[src$=\#gh-dark-mode-only] {
	display: none;
}

</style>
            
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/markdown.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/highlight.css">
<style>
            body {
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif;
                font-size: 14px;
                line-height: 1.6;
            }
        </style>
        <style>
.task-list-item {
    list-style-type: none;
}

.task-list-item-checkbox {
    margin-left: -20px;
    vertical-align: middle;
    pointer-events: none;
}
</style>
<style>
:root {
  --color-note: #0969da;
  --color-tip: #1a7f37;
  --color-warning: #9a6700;
  --color-severe: #bc4c00;
  --color-caution: #d1242f;
  --color-important: #8250df;
}

</style>
<style>
@media (prefers-color-scheme: dark) {
  :root {
    --color-note: #2f81f7;
    --color-tip: #3fb950;
    --color-warning: #d29922;
    --color-severe: #db6d28;
    --color-caution: #f85149;
    --color-important: #a371f7;
  }
}

</style>
<style>
.markdown-alert {
  padding: 0.5rem 1rem;
  margin-bottom: 16px;
  color: inherit;
  border-left: .25em solid #888;
}

.markdown-alert>:first-child {
  margin-top: 0
}

.markdown-alert>:last-child {
  margin-bottom: 0
}

.markdown-alert .markdown-alert-title {
  display: flex;
  font-weight: 500;
  align-items: center;
  line-height: 1
}

.markdown-alert .markdown-alert-title .octicon {
  margin-right: 0.5rem;
  display: inline-block;
  overflow: visible !important;
  vertical-align: text-bottom;
  fill: currentColor;
}

.markdown-alert.markdown-alert-note {
  border-left-color: var(--color-note);
}

.markdown-alert.markdown-alert-note .markdown-alert-title {
  color: var(--color-note);
}

.markdown-alert.markdown-alert-important {
  border-left-color: var(--color-important);
}

.markdown-alert.markdown-alert-important .markdown-alert-title {
  color: var(--color-important);
}

.markdown-alert.markdown-alert-warning {
  border-left-color: var(--color-warning);
}

.markdown-alert.markdown-alert-warning .markdown-alert-title {
  color: var(--color-warning);
}

.markdown-alert.markdown-alert-tip {
  border-left-color: var(--color-tip);
}

.markdown-alert.markdown-alert-tip .markdown-alert-title {
  color: var(--color-tip);
}

.markdown-alert.markdown-alert-caution {
  border-left-color: var(--color-caution);
}

.markdown-alert.markdown-alert-caution .markdown-alert-title {
  color: var(--color-caution);
}

</style>
        
        </head>
        <body class="vscode-body vscode-light">
            <h1 id="鸿蒙智能家居-app-使用说明"><strong>鸿蒙智能家居 App 使用说明</strong></h1>
<h2 id="简要说明">简要说明</h2>
<p>该鸿蒙智能家居 App 是基于 <strong>HarmonyOS</strong> 构建的智能家居控制平台，功能包括用户登录、房间管理、设备控制和个性化设置。登录功能通过 <strong>Node.js</strong> 后端实现，支持从华为 IoT 平台获取实时数据，并结合 <strong>MQTT 协议</strong>实现设备数据交互。</p>
<hr>
<h2 id="快速导航">快速导航</h2>
<h3 id="主标题">主标题</h3>
<ul>
<li><a href="#%E7%99%BB%E5%BD%95%E5%8A%9F%E8%83%BD">登录功能</a></li>
<li><a href="#%E4%B8%BB%E9%A1%B5%E5%8A%9F%E8%83%BD">主页功能</a>
<ul>
<li><a href="#%E6%8E%A7%E5%88%B6%E4%B8%AD%E5%BF%83">控制中心</a></li>
<li><a href="#%E6%B7%BB%E5%8A%A0%E6%88%BF%E9%97%B4%E6%88%96%E8%AE%BE%E5%A4%87">添加房间或设备</a></li>
<li><a href="#%E5%AE%A2%E5%8E%85%E5%8A%9F%E8%83%BD">客厅功能</a></li>
<li><a href="#%E6%99%AE%E9%80%9A%E6%88%BF%E9%97%B4%E5%8A%9F%E8%83%BD">普通房间功能</a></li>
</ul>
</li>
<li><a href="#%E6%9B%B4%E5%A4%9A%E5%8A%9F%E8%83%BD">更多功能</a>
<ul>
<li><a href="#%E7%94%A8%E6%88%B7%E4%BF%A1%E6%81%AF%E4%B8%8E%E4%B8%AA%E4%BA%BA%E4%B8%AD%E5%BF%83">用户信息与个人中心</a></li>
<li><a href="#%E5%B1%95%E7%A4%BA%E9%9A%90%E8%97%8F%E6%8E%A7%E5%88%B6%E4%B8%AD%E5%BF%83">展示/隐藏控制中心</a></li>
<li><a href="#%E6%88%BF%E5%B1%8B%E8%AE%BE%E7%BD%AE%E4%B8%8E%E6%99%BA%E8%83%BD%E8%AE%BE%E5%A4%87">房屋设置与智能设备</a></li>
</ul>
</li>
<li><a href="#%E9%99%84%E5%BD%95">附录</a>
<ul>
<li><a href="#%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84">目录结构</a></li>
<li><a href="#nodejs-%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AE%80%E4%BB%8B">Node.js 服务器简介</a></li>
</ul>
</li>
</ul>
<hr>
<h2 id="登录功能"><strong>登录功能</strong></h2>
<h3 id="功能说明"><strong>功能说明</strong></h3>
<p>用户通过输入用户名和密码登录。系统验证身份后，返回用户授权的房间和设备信息，支持个性化配置。</p>
<h3 id="界面截图"><strong>界面截图</strong></h3>
<img src="img/登录界面.png" alt="登录界面" width="300">
<hr>
<h2 id="主页功能"><strong>主页功能</strong></h2>
<p>主页功能提供房间和设备的集中管理，主要包括控制中心、房间设备管理以及实时数据监控。</p>
<h3 id="控制中心"><strong>控制中心</strong></h3>
<h4 id="功能说明-1"><strong>功能说明</strong></h4>
<p>控制中心可锁定或删除客厅以外的房间。锁定的房间无法编辑，删除的房间将从列表中移除。</p>
<h4 id="界面截图-1"><strong>界面截图</strong></h4>
<ol>
<li>控制中心页面<br>
<img src="img/控制中心页面.png" alt="控制中心页面" width="300"></li>
<li>房间锁定页面<br>
<img src="img/房间锁定页面.png" alt="房间锁定页面" width="300"></li>
<li>删除成功页面<br>
<img src="img/控制中心页面.png" alt="控制中心页面" width="300"></li>
</ol>
<hr>
<h3 id="添加房间或设备"><strong>添加房间或设备</strong></h3>
<h4 id="功能说明-2"><strong>功能说明</strong></h4>
<p>主页右上角的 <strong>“+” 按钮</strong> 提供快速添加功能，弹出菜单包括添加房间或设备选项。</p>
<h4 id="界面截图-2"><strong>界面截图</strong></h4>
<ol>
<li>弹出菜单<br>
<img src="img/控制中心页面.png" alt="控制中心页面" width="300"></li>
<li>添加房间界面<br>
<img src="img/添加房间界面.png" alt="添加房间界面" width="300"></li>
<li>添加设备界面<br>
<img src="img/添加设备界面.png" alt="添加设备界面" width="300"></li>
</ol>
<hr>
<h3 id="客厅功能"><strong>客厅功能</strong></h3>
<h4 id="功能说明-3"><strong>功能说明</strong></h4>
<p>客厅标签通过华为 IoT 平台和 <strong>MQTT 协议</strong>获取以下数据：</p>
<ul>
<li>PM2.5</li>
<li>温度</li>
<li>湿度</li>
<li>光照</li>
</ul>
<p>用户可通过客厅界面的四个按钮切换显示不同的数据。</p>
<h4 id="界面截图-3"><strong>界面截图</strong></h4>
<ol>
<li>PM2.5 数据<br>
<img src="img/pm25.png" alt="PM2.5 数据" width="300"></li>
<li>温度数据<br>
<img src="img/温度数据.png" alt="温度数据" width="300"></li>
<li>湿度数据<br>
<img src="img/湿度数据.png" alt="湿度数据" width="300"></li>
<li>光照数据<br>
<img src="img/光照数据.png" alt="光照数据" width="300"></li>
</ol>
<hr>
<h3 id="普通房间功能"><strong>普通房间功能</strong></h3>
<h4 id="功能说明-4"><strong>功能说明</strong></h4>
<p>普通房间包含：</p>
<ol>
<li><strong>常用场景</strong>：用户选择场景后高亮显示，且只能选择一个场景。</li>
<li><strong>智能家居</strong>：显示房间内的智能家居设备状态。</li>
</ol>
<h4 id="界面截图-4"><strong>界面截图</strong></h4>
<img src="img/普通房间功能界面.png" alt="普通房间功能界面" width="300">
---
<h2 id="更多功能"><strong>更多功能</strong></h2>
<p>更多功能页面提供用户信息管理、控制中心展示控制，以及房屋整体设置。</p>
<h4 id="界面截图-5"><strong>界面截图</strong></h4>
<img src="img/更多页面.png" alt="更多页面" width="300">
<h3 id="用户信息与个人中心"><strong>用户信息与个人中心</strong></h3>
<h4 id="功能说明-5"><strong>功能说明</strong></h4>
<p>点击顶部用户信息，可跳转至 <strong>个人中心页面</strong>，显示详细用户信息。</p>
<h4 id="界面截图-6"><strong>界面截图</strong></h4>
<p>个人中心页面<br>
<img src="img/个人中心页面.png" alt="个人中心页面" width="300"></p>
<hr>
<h3 id="展示隐藏控制中心"><strong>展示/隐藏控制中心</strong></h3>
<h4 id="功能说明-6"><strong>功能说明</strong></h4>
<p>通过 “主界面展示控制中心” 按钮，用户可隐藏主页上的控制中心。</p>
<h4 id="界面截图-7"><strong>界面截图</strong></h4>
<img src="img/展示隐藏控制中心.png" alt="展示隐藏控制中心" width="300">
<img src="img/已隐藏控制中心.png" alt="已隐藏控制中心" width="300">
<hr>
<h3 id="房屋设置与智能设备"><strong>房屋设置与智能设备</strong></h3>
<h4 id="功能说明-7"><strong>功能说明</strong></h4>
<p>点击 <strong>房屋设置</strong> 按钮，可显示跑马灯滚动的房屋信息，并展示水电网燃气的总体设置以及智能家居设备列表。</p>
<h4 id="界面截图-8"><strong>界面截图</strong></h4>
<img src="img/房屋设置界面.png" alt="房屋设置界面" width="300">
<hr>
<h2 id="附录">附录</h2>
<h3 id="目录结构"><strong>目录结构</strong></h3>
<pre><code>ets
├── entryability
├── entrybackupability
├── model
│   ├── AdditionalRoom.ets
│   ├── HWUser.ets
│   ├── LocalUser.ets
├── pages
│   ├── home_component
│   │   ├── AddRoomPage.ets
│   │   ├── AddRoomSettingPage.ets
│   │   ├── CommonFunc.ets
│   │   ├── ControlCenter.ets
│   │   ├── DeleteSuccess.ets
│   │   ├── LivingRoom.ets
│   │   ├── LockSuccess.ets
│   │   ├── LockedRoom.ets
│   │   ├── MainRoom.ets
│   │   ├── PopupMenu.ets
│   ├── more_component
│   │   ├── OperationSuccess.ets
│   │   ├── UserInfo.ets
│   ├── Home.ets
│   ├── Index.ets
│   ├── Login.ets
│   ├── More.ets
├── tools
    ├── ClearGlobalThis.ets
    ├── EventBus.ets
    ├── HttpTool.ets
</code></pre>
<hr>
<h4 id="文件功能说明"><strong>文件功能说明</strong></h4>
<h5 id="model"><strong><code>model</code></strong></h5>
<ul>
<li><strong><code>AdditionalRoom.ets</code></strong>: 定义房间的模型结构，包括名称、状态和设备信息等。</li>
<li><strong><code>HWUser.ets</code></strong>: 用于存放与华为 IoT 平台交互的数据结构，例如获取 <code>token</code> 的相关请求。</li>
<li><strong><code>LocalUser.ets</code></strong>: 定义本地用户的模型，处理用户的本地信息存储和管理。</li>
</ul>
<h5 id="pageshome_component"><strong><code>pages/home_component</code></strong></h5>
<ul>
<li><strong><code>AddRoomPage.ets</code></strong>: 添加新房间的界面，包括输入房间名称的功能。</li>
<li><strong><code>AddRoomSettingPage.ets</code></strong>: 配置新房间的详细设置，例如选择房间设备类型等。</li>
<li><strong><code>CommonFunc.ets</code></strong>: 通用房间组件，用于渲染用户添加的房间。</li>
<li><strong><code>ControlCenter.ets</code></strong>: 控制中心页面，管理智能设备的主要操作。</li>
<li><strong><code>DeleteSuccess.ets</code></strong>: 删除房间或设备成功后的反馈页面。</li>
<li><strong><code>LivingRoom.ets</code></strong>: 展示客厅页面的布局和逻辑。</li>
<li><strong><code>LockSuccess.ets</code></strong>: 房间锁定成功后的反馈页面。</li>
<li><strong><code>LockedRoom.ets</code></strong>: 管理已锁定房间的页面。</li>
<li><strong><code>MainRoom.ets</code></strong>: 展示和管理主房间的整体信息。</li>
<li><strong><code>PopupMenu.ets</code></strong>: 弹出菜单的界面与交互逻辑。</li>
</ul>
<h5 id="pagesmore_component"><strong><code>pages/more_component</code></strong></h5>
<ul>
<li><strong><code>OperationSuccess.ets</code></strong>: 通用操作成功的反馈页面。</li>
<li><strong><code>UserInfo.ets</code></strong>: 用户信息页面，提供用户资料的展示和修改功能。</li>
</ul>
<h5 id="pages"><strong><code>pages</code></strong></h5>
<ul>
<li><strong><code>Home.ets</code></strong>: 应用的主页面，提供房间管理和设备导航功能。</li>
<li><strong><code>Index.ets</code></strong>: 一个 <code>tab</code> 页面，提供切换到主页（<code>Home</code>）和更多页面（<code>More</code>）的功能。</li>
<li><strong><code>Login.ets</code></strong>: 登录页面，提供用户认证功能。</li>
<li><strong><code>More.ets</code></strong>: 更多设置页面，扩展应用功能选项。</li>
</ul>
<h5 id="tools"><strong><code>tools</code></strong></h5>
<ul>
<li><strong><code>ClearGlobalThis.ets</code></strong>: 清理全局变量，确保内存使用安全和稳定。</li>
<li><strong><code>EventBus.ets</code></strong>: 全局事件总线，用于不同组件间的事件通信。</li>
<li><strong><code>HttpTool.ets</code></strong>: 网络请求工具类，封装了常用的 HTTP 请求逻辑。</li>
</ul>
<hr>
<h3 id="nodejs-服务器简介"><strong>Node.js 服务器简介</strong></h3>
<p>Node.js 服务器是鸿蒙智能家居 App 的后端核心，运行在 <strong>阿里云服务器</strong> 上。主要功能包括：</p>
<ol>
<li><strong>用户登录</strong>：
<ul>
<li>验证用户名和密码，返回用户的详细信息。</li>
<li>支持用户名或密码错误的提示。</li>
</ul>
</li>
<li><strong>用户注册</strong>：
<ul>
<li>支持用户信息（用户名、密码、昵称、联系方式等）的存储。</li>
<li>返回成功提示及用户 ID。</li>
</ul>
</li>
<li><strong>功能预留</strong>：
<ul>
<li>包括重置密码和删除用户功能，尚未实现。</li>
</ul>
</li>
<li><strong>数据库支持</strong>：
<ul>
<li>使用 <strong>MySQL</strong> 作为数据库。</li>
<li>数据库运行在阿里云，支持高效查询和多用户并发访问。</li>
</ul>
</li>
</ol>
<hr>

            
            
        </body>
        </html>